<h1 class="page-title">Computing Farm <span class="fw-semi-bold">Nodes</span></h1>

<section class="widget" widget>
  <header>
    <h4 style="display:inline-block;">List of <span class="fw-semi-bold">Farm Nodes</span></h4>
      <div style="display:block; float:right;">
          <div style="display:inline-block; white-space: nowrap; padding: 4px;">
            <input type="checkbox" [(ngModel)]="show_only_active"> Only Active
            <i class="fa fa-search" style="padding-right:8px;"></i><input class="form-control form-control-dark" id="table-search-input" [(ngModel)]="searchText" type="text" placeholder="Search by Name">
          </div>
          <div style="display:inline-block;">            
            <button type="button" class="btn btn-primary btn-xs" (click)="reloadClient($event, -1)">Restart All</button>
          </div>
      </div>
  </header>
  <div class="widget-body">

    <div>
      <table class="table table-striped table-hover">
        <thead>
        <tr class="table-smallheader">
          <th>
            Id
          </th>
          <th>
            Name
          </th>
          <th class="hidden-sm-down">
            Last Seen
          </th>
          <th class="hidden-sm-down">
            Jobs
          </th>
          <th class="no-sort">
            Status
          </th>
        </tr>
        </thead>

        <ng-container *ngFor="let group of nodes_by_group | mapToIterable">             
          <tbody farm_nodes_item (onJobDetails)="displayJobDetails($event)" (onDisplayNodeDetails)="displayNodeDetails($event)" [group_key]="group.key" [group_val]="group.val | SearchPipe : searchText | OnlyActivePipe : show_only_active"></tbody>
        </ng-container>

      </table>

    </div>

</div>
</section>

<div *ngIf="selected_node_id>0" class="bottominfopanel" style="height:30%;">
    <div class="header">
      <h4 style="display: inline-block; padding:3px;">
          Farm Node Details
      </h4>
      <div style="float: right !important; ">
        <button class="btn btn-close" aria-label="Close" (click)="hideNodeDetails()">&times;</button>
      </div>
    </div>
    <div class="content" style="padding:8px;">
      <farm_node [nodeid]="selected_node_id"></farm_node>   
    </div>
</div>

<job_infopanel [job_id]="selected_job_id" (onHideJobDetails)="selected_job_id=0"></job_infopanel>